<template>
  <div class="releaseDesc">
    <div class="rules">
      <div class="rule-detail">
        1.请填写真实详尽的信息，在发生纠纷时，将成为保护你利益的重要举证材料
      </div>
      <div class="rule-detail">
        2.请说明你是业主还是租客，并详细描述户型，室友性别/职业、宠物等情况
      </div>
      <div class="rule-detail">
        3.请说明付款方式，以及可能的收费事项，例如电费网络费用管理费等
      </div>
    </div>
    <div class="input">
      <i-input
        type="textarea"
        placeholder="请详细描述房源相关信息"
        :value="value"
        @change="valueChange" />
    </div>
    <div class="sure">
      <button class="button pull-right" @tap="buttonClick">确定</button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  data () {
    return {
      value: ''
    }
  },
  methods: {
    valueChange (e) {
      this.value = e.target.detail.value
    },
    buttonClick () {
      this.SET_RELEASEDESC(this.value)

      wx.navigateBack()
    },
    ...mapMutations([
      'SET_RELEASEDESC'
    ])
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .releaseDesc {
    > .rules {
      padding: 15px;
      font-size: 12px;
      background-color: rgb(243, 245, 248);
      color: #495060;
      > .rule-detail {
        margin-bottom: 2px;
        &:nth-last-of-type(1) {
          margin-bottom: 0;
        }
      }
    }
    > .sure {
      margin-top: 15px;
      margin-right: 15px;
      > .button {
        width: 100px;
        background-color: $color-default;
        border-radius: 20px;
        color: white;
        font-size: 16px;
      }
    }
  }

</style>
